<template>
	<view class="personal">
		<u-cell-group>
			<u-cell title="姓名" :value="userInfo.username" :isLink="true"></u-cell>
			<u-cell title="手机号" :value="userInfo.phone" :isLink="true"></u-cell>
			<u-cell title="邮箱" :value="userInfo.email" :isLink="true"></u-cell>
			<u-cell title="QQ号" :value="userInfo.qq" :isLink="true"></u-cell>
		</u-cell-group>
		<u-button type="primary" @click="show = true" text="退出登录"></u-button>

		<u-action-sheet :actions="list" :closeOnClickOverlay="true" @select="selectClick" :show="show" cancelText="取消"
			round="15" :safeAreaInsetBottom="true" @close="actionClose"></u-action-sheet>

	</view>

</template>

<script>
	import {
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				show: false,
				userInfo: {}, // 用户信息
				popupShow: false,
				list: [{
						name: '登录其他账号',
						fontSize: '18'
					},
					{
						name: '退出登录',
						fontSize: '18',
					}
				],
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			...mapMutations('loginModules', ['setToken']),
			// 获取用户资料
			async getUserInfo() {
				if (this.$store.state.loginModules.jwtToken) {
					const {
						data: res
					} = await uni.$http.get('/v1/user')
					if (res.status !== 200) return uni.$showMsg()
					this.userInfo = res.data.client
				}
			},
			// 关闭弹出层
			actionClose() {
				this.show = false
				// console.log('close');
			},
			// 获取弹出层所选item
			selectClick(index) {
				console.log(index);
				if (index.name === "登录其他账号") {
					// 登录其他账号
					uni.navigateTo({
						url: "/subpages/login/login"
					})
				} else if (index.name === "退出登录") {
					// 退出登录
					this.setToken("")
					uni.removeStorageSync('jwtToken');
					uni.navigateBack({
						delta: 1
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personal{
		min-height: 100vh;
	}
	.u-popup {
		background-color: #f5f5f5;
	}

	.u-button {
		margin-top: 15rpx;
	}

	.popup-content {
		height: 15rpx;
		background-color: #f5f5f5;
	}

	.opoup-solid {
		height: 1rpx;
		background-color: #f5f5f5;
	}

	/deep/.u-line {
		border-bottom-style: unset !important;
		border-bottom: 1px solid #f5f5f5;
	}

	.u-cell {
		height: 90rpxrpx !important;
	}

	/deep/.u-reset-button {
		border-bottom: 1px solid #f5f5f5;
	}
</style>
